<!DOCTYPE html>
<html>
	<head>
		<title>张晋源的html</title>
		<link href="main.css" type="'text/css" rel="stylesheet">
<!--		<style>-->
<!--			/* &lt;!&ndash;给p标签打上框&ndash;&gt; */-->
<!--			p -->
<!--			{-->
<!--				border: 1px solid gray;-->
<!--			}-->

<!--			div {-->
<!--					width:300px;-->
<!--					height:100px;-->
<!--					line-height:100px;-->
<!--					text-align:center;-->
<!--					border:1px #000 solid; -->
<!--					color: white;-->
<!--					text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;-->
<!--				}-->

<!--		</style>-->

	</head>

	<body>
		HelloWorld!
	</body>

	<div class="'wellcome" >Wellcome!</div>

	<p>Hello <span style="color: red"> 世界! </span></p>
	<h1 style="color : red">这是h1标签</h1>

	<h1>这是h1标签</h1>
	<h2>这是h2标签</h2>
	<h3>这是h3标签</h3>
	<h4>这是h4标签</h4>
	<h5>这是h5标签</h5>
	<h6>这是h6标签</h6>

	<p>****超链接标签****</p>
	<a href="https://www.baidu.com/" target="_blank">我的主页</a>

	<p>****图片标签****</p>
	<img src="image/test2.jpg" width="1000" height="450" alt="BrandLogo" />

	<p>==========表单标签==========</p>

	<p>======== 表单标签 ========</p>
		<form action="#">
			<input type="hidden" id="userId" name="userId" value="1" />
			<p>
				<label for="userName">用户名：</label>
				<input type="text" id="userName" name="userName"
					   value="Jinyuan Zhang" readonly="readonly" />
			</p>
			<p>
				<label for="password">密码：</label>
				<input type="password" id="password" name="password" />
			</p>
			<p>
				<label for="sex">性别：</label>
				<input type="radio" name="sex" value="male" checked /> 男
				<input type="radio" name="sex" value="famale" /> 女
			</p>
			<p>
				<label for="love">爱好：</label>
				<input type="checkbox" name="love" value="游泳" checked />游泳
				<input type="checkbox" name="love" value="篮球"  />篮球
				<input type="checkbox" name="love" value="旅游" />旅游
				<input type="checkbox" name="love" value="瑜伽" />瑜伽
			</p>
			<p>
				<select id="city" name="city">
					<option value="重庆">重庆</option>
					<option value="成都">成都</option>
					<option value="北京">北京</option>
					<option value="上海" selected>上海</option>
					<option value="广州">广州</option>
					<option value="深圳">深圳</option>
				</select>
			</p>
			<p>
				<textarea name="desc" id="desc" cols="20" rows="4"></textarea>
			</p>
			<p>
				<input type="button" name="btn01" value="按钮" />
				<input type="reset" name="btn02" value="重置" />
				<input type="submit" name="btn03" value="提交" />
			</p>
			<p>
				<input type="date" name="currentDate" />
				<input type="number" min="1" max="10" step="2" />
				<input type="email" name="email" />
			</p>

	<p>
		<select id="'city" name="city">
			<option value="重庆">重庆</option>
			<option value="成都">成都</option>
			<option value="北京">北京</option>
			<option value="上海" selected>上海</option>
			<option value="广州">广州</option>
			<option value="深圳">深圳</option>
		</select>
	</p>

	<p>==========表单标签==========</p>
	<p>==========表单标签==========</p>
	<p>==========表单标签==========</p>

	<p>==========按钮==========</p>
	<p>
		<input type="button" name="btn01" value="按钮" />
		<input type="reset" name="btn02" value="重置" />
		<input type="submit" name="btn03" value="提交" />
	</p>

	<p><input type="data" name="currentdata" /><br /></p>

	<p><input type="number" min="1" max="1000" step="10" value="100" /><br /></p>

	<p><input type="email" /><br /></p>

	<p>==========Datalist==========</p>
	<p>
		<input list="dl1" />
		<datalist id="dl1">
			<option value="Internet Explorer">Internet Explorer</option>
			<option value="Firefox">Firefox</option>
			<option value="Chrome">Chrome</option>
			<option value="Opera">Opera</option>
			<option value="Safari">Safari</option>
		</datalist>
	</p>

	<table>
		<tr>
			<th>月数</th>
			<th>收入</th>
			<th>支出</th>
		</tr>
		<tr>
			<td>1月</td>
			<td>￥1000</td>
			<td rowspan="2">￥800</td>
		</tr>
		<tr>
			<td>2月</td>
			<td>￥1000</td>
		</tr>
		<tr>
			<td colspan="3">余额: ￥1200</td>
		</tr>
	</table>

	<form>
		<label for="male">Male</label>
		<input type="radio" name="sex" id="male" />
		<br />
		<label for="female">Female</label>
		<input type="radio" name="sex" id="female" />
	</form>

	<p>=========列表标签=========</p>
	<p>标签1</p>
	<ul type="square">
		<li>coffe</li>
		<li>Tea</li>
		<li>Milk</li>
	</ul>

	<p>标签2</p>
	<ol start="1">
		<li>coffe</li>
		<li>Tea</li>
		<li>Milk</li>
	</ol>

	<p>标签3</p>
	<dl>
		<dt>一级标签1</dt>
		<dd>二级标签1</dd>
		<dd>二级标签2</dd>
		<dt>一级标签2</dt>
		<dd>二级标签3</dd>
	</dl>
	<p>子安燕</p>
	<img src="image/test2.jpg" width="800" height="350" alt="BrandLogo" />

	<p>视频测试</p>
	<video src="https://video.shipin520.com/videos/05/12/19/a_qWPD4CwqVDej1600051219_10s.mp4"
		   width="800" height="350" controls="controls">您的浏览器不支持 video 标签。</video>

	<p>音频测试</p>
	<audio controls>
		<source src="audio/test.wav">
	</audio>

	

</html>
